<template>
  <div class="about">
    <h1>tab切换</h1>
    <div class="box-img">
      <div v-for="item, index in data.imgs" :key="index" @click="tabtoggle(index)">
        <el-image :src="item" class="img"></el-image>
      </div>
    </div>
    <div>
      <el-image class="image" :src="item" v-for="item, index in data.imgs" :key="index"
        v-show="data.activeIndex == index"></el-image>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'

const data = reactive({
  imgs: [
    'https://img1.baidu.com/it/u=79970571,3817041641&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729',
    'https://img1.baidu.com/it/u=2889758393,3980738007&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
    'https://img2.baidu.com/it/u=2412411645,3602446803&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=500',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fraw%2Fpublic%2Fp106878681.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681216521&t=6bebd9b15ecba012fd11503e916741ee'
  ],
  activeIndex: 0
})

const tabtoggle = (i) => {
  data.activeIndex = i
}

</script>
<style lang="scss" scoped>
.about {
  text-align: center;

  .box-img {
    width: 100%;
    display: flex;
    align-items: center;

    .img {
      width: 300px;
      height: 300px;
      margin: 0 20px;
    }
  }

}

.image {
  width: 300px;
  height: 400px;
}
</style>